<template>
  <div class="home">
    <el-header class="header">
      <div class="time">
        <el-date-picker v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="choice-time">
        <el-date-picker v-model="value3"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="tip">
            <el-select v-model="valueUnits" placeholder="所属单位" :popper-append-to-body="false">
              <el-option v-for="item in unioptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
      </div>
      <div class="tip">
            <el-select v-model="valuePerson" placeholder="所属用户" :popper-append-to-body="false">
              <el-option v-for="item in personoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
      </div>
      <div class="tip">
            <el-select v-model="valueType" placeholder="类型" :popper-append-to-body="false">
              <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
      </div>
      <div class="input-device">
        <el-input placeholder="输入关键字（根据名称" v-model="searchKey" @input="getForm" clearable></el-input>
      </div>
      <div class="header-button">
        <el-button type="primary" @click="getForm">搜索</el-button>
        <el-button type="success" @click="getForm">重置</el-button>
        <el-button type="danger" @click="deleteForm">批量删除</el-button>
        <el-button type="warning">批量恢复</el-button>
        <el-button class="output">导出为Excel文件</el-button>
      </div>
    </el-header>
    <el-main class="table">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" height="300" border style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="bottom" inline class="demo-table-expand">
            <el-form-item label="上传时间">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ props.row.uploadTime }}</span>
            </el-form-item>
            <el-form-item label="文件类型">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ props.row.evidenceType }}</span>
            </el-form-item>
            <el-form-item label="文件描述">
            <i class="el-icon-document"></i>
            <span style="margin-left: 10px">{{ props.row.description }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="文件名"></el-table-column>
      <el-table-column prop="createdTime" label="拍摄时间"></el-table-column>
      <el-table-column prop="evidenceType" label="证据类型"></el-table-column>
      <el-table-column prop="createUser" label="拍摄人"></el-table-column>
      <el-table-column prop="groupInfo.name" label="所属单位"></el-table-column>
      <el-table-column prop="uploadTime" label="历史资料归档时间"></el-table-column>
      <el-table-column prop="fileLevel" label="等级"></el-table-column>
      <el-table-column prop="operation" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
        <el-button type="text" @click="dialogTableVisible = true" class="edit-button">
          <div class="bottom">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <img class="edit" src="../assets/img/编辑.png">
          </el-tooltip>
          </div>
        </el-button>
        <el-popover
          placement="top"
          width="160"
          :ref="`popover-${scope.$index}`">
          <p>确定删除？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="closeDeleteWindow(scope)">取消</el-button>
            <el-button type="primary" size="mini" >确定</el-button>
          </div>
          <el-button type="text" slot="reference" class="delete-button">
            <div class="bottom">
              <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <img class="delete" src="../assets/img/删除.png">
              </el-tooltip>
            </div>
          </el-button>
        </el-popover>
        <el-popover
          placement="top"
          width="160"
          :ref="`popover-${scope.$index}`">
          <p>确定删除？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="closeDeleteWindow(scope)">取消</el-button>
            <el-button type="primary" size="mini" >确定</el-button>
          </div>
          <el-button type="text" slot="reference" class="delete-button">
            <div class="bottom">
              <el-tooltip class="item" effect="dark" content="解除绑定" placement="bottom">
              <img class="lock" src="../assets/img/锁定.png">
              </el-tooltip>
            </div>
          </el-button>
        </el-popover>
        </template>
      </el-table-column>
      </el-table>
      <div class="edit-dialog">
      <el-dialog title="" :visible.sync="dialogTableVisible">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="认证ID" prop="authenticationID">
            <el-input v-model="ruleForm.authenticationID"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="ruleForm.deviceName"></el-input>
          </el-form-item>
          <el-form-item label="设备序列号" prop="deviceID">
            <el-input v-model="ruleForm.deviceID"></el-input>
          </el-form-item>
          <el-form-item label="MAC地址" prop="MACAddress">
            <el-input v-model="ruleForm.MACAddress"></el-input>
          </el-form-item>
          <el-form-item label="所属单位" prop="unitform">
            <el-select v-model="ruleForm.unitform" placeholder="请选择">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定人员" prop="person">
            <el-select v-model="ruleForm.person" placeholder="请选择">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡逻区域" prop="beat1">
            <el-select v-model="ruleForm.beat1" placeholder="请选择">
              <el-option label="九联科技" value="九联科技"></el-option>
              <el-option label="惠州市中心" value="惠州市中心"></el-option>
              <el-option label="数码园南区" value="数码园南区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电子围栏" prop="electricFence">
            <el-select v-model="ruleForm.electricFence" placeholder="请选择">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
          </el-form>
      </el-dialog>
      </div>
    </el-main>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="total"
        :tableData="tableData">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getHistory, deleteHistory } from '../api/history/index'
export default {
  data () {
    return {
      input: '',
      searchKey: '',
      pageSize: 1,
      currentPage: 1,
      unioptions: [{
        value: '选项1',
        label: '九联'
      }, {
        value: '选项2',
        label: '研发中心'
      }, {
        value: '选项3',
        label: '质量中心'
      }, {
        value: '选项4',
        label: '项目部'
      }, {
        value: '选项5',
        label: '测试'
      }],
      personoptions: [{
        value: '选项1',
        label: '九联管理员'
      }, {
        value: '选项2',
        label: '质量中心管理员'
      }, {
        value: '选项3',
        label: '项目部管理员'
      }, {
        value: '选项4',
        label: '研发中心管理员'
      }, {
        value: '选项5',
        label: '杨成思'
      }],
      typeoptions: [{
        value: 1,
        label: '音频'
      }, {
        value: 2,
        label: '视频'
      }, {
        value: 3,
        label: '图片'
      }, {
        value: 4,
        label: '其它'
      }],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      valueUnits: '',
      valuePerson: '',
      valueType: '',
      // 第一个时间选择器绑定数值
      value2: '',
      value3: '',
      tableData: null,
      total: null,
      archive: 1,
      multipleSelection: [],
      ruleForm: {
        authenticationID: '',
        deviceName: '',
        deviceID: '',
        unitform: ''
      },
      rules: {
        authenticationID: [
          { required: true, message: '请输入认证ID', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        deviceID: [
          { required: true, message: '请输入设备序列号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        unitform: [
          { required: true, message: '请选择所属单位', trigger: 'change' }
        ]
      },
      dialogTableVisible: false
    }
  },
  mounted () {
    this.getForm()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    closeDeleteWindow (scope) {
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 获取历史数据
    getForm () {
      getHistory({
        currentPage: this.currentPage,
        archive: 1,
        employeesId: this.valuePerson,
        evidenceType: this.valueType,
        organizationId: this.valueUnits,
        pageSize: this.pageSize,
        search: this.searchKey,
        endTime: this.value2[1],
        startTime: this.value2[0],
        archiveStartTime: this.value3[0],
        archiveEndTime: this.value3[1]
      })
        .then((res) => {
          console.log('调用历史数据')
          console.log(res)
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        }).catch((error) => {
          console.log(error)
        })
    },
    // 删除历史数据
    deleteForm () {
      deleteHistory({})
    }
  }
}

</script>

<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 2px;
  /*滚动条宽度*/
  height: 12px;
  /*滚动条高度*/
  background-color: white;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0px white;
  -webkit-box-shadow: inset 0 0 0px white;
  background-color: rgb(193, 193, 193);
  /*滚动条的背景颜色*/
  border-radius: 20px;
}
.el-table__fixed {
  height: calc(100% - 12px) !important;
}
.el-table__fixed-right {
  height: calc(100% - 12px) !important;
}
.el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: unset !important;
}
.el-form-item__label {
  font-size: 4px;
  color: rgb(247, 240, 240);
}
.el-form-item__error {
  padding-top: 0;
  padding-bottom: 2px;
  font-size: 2px;
}
.el-form-item {
  margin-bottom: 6px;
}
.el-input__inner::-webkit-input-placeholder {
  font-size: 10px;
}
/* 时间选择器样式 */
.el-range-editor.el-input__inner{
  background-color: #061733;
  border-radius: 0;
  width: 250px;
  height: 25px;
  font-size: 6px!important;
  border: 1px solid #409EFF;
}
.el-date-editor .el-range__icon{
  margin-bottom: 12px;
  line-height: 28px;
  color: #409EFF;
}
.el-range-separator{
  color: rgb(225, 230, 236) !important;
  line-height: 17px!important;
  font-size: 12px!important;
}
.el-date-editor .el-range__close-icon{
  line-height: 17px;
}
.el-range-editor .el-range-input {
  background-color: #061733;
  font-size: 6px;
}
.el-range-input{
  color: rgb(225, 230, 236) !important;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #409EFF;
  font-size: 6px;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.el-table__expanded-cell[class*=cell] {
  padding: 20px 50px;
  background-color: #061733;
  font-size: 6px;
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
.el-form--inline .el-form-item__content {
  font-size: 6px;
}

</style>

<style scoped>
.home {
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
}
/* 时间选择器样式 */
.time {
  display: flex;
  flex-direction: row;
  margin-right: 5px;
}
.choice-time {
  display: flex;
  flex-direction: row;
  margin-right: 5px;
}
/* .time >>> .el-range-editor.el-input__inner{
  background-color: #061733;
  width: 260px;
  height: 25px;
  font-size: 6px!important;
  border: 1px solid #409EFF;
}
.time >>> .el-date-editor .el-range__icon{
  margin-bottom: 12px;
  line-height: 28px;
  color: #409EFF;
}
.time >>> .el-range-separator{
  color: rgb(225, 230, 236) !important;
  line-height: 17px!important;
  font-size: 12px!important;
}
.time >>> .el-date-editor .el-range__close-icon{
  line-height: 17px;
}
.time >>> .el-range-editor .el-range-input {
  background-color: #061733;
  font-size: 6px;
}
.time >>> .el-range-input{
  color: rgb(225, 230, 236) !important;
} */
.tip >>> .el-input__inner {
  border-radius: 0;
  border: 1px solid #238cd6;
  background-color: #061d3c;
  height: 25px;
  width: 150px;
  margin-right: 10px;
  font-size: 4px;
  color: #fff;
}
.tip >>> .el-scrollbar{
  background-color: #111f3a;
  border-color: #073c75;
  color: #37a5f0;
  font-size: 4px;
}
.tip >>> .el-input__icon {
  line-height: 20px;
  margin-right: 10px;
}
.authentication >>> .el-input__inner {
  border-radius: 0;
  border: 1px solid #238cd6;
  background-color: #061d3c;
  height: 25px;
  margin-right: 10px;
  width: 150px;
}
.input-device >>> .el-input__inner {
  border-radius: 0;
  border: 1px solid #238cd6;
  background-color: #061d3c;
  height: 25px;
  margin-right: 10px;
  width: 150px;
}
.header >>> .el-input__inner::-webkit-input-placeholder {
  color: gray;
  text-align: left;
  font-size: 4px;
}
.el-button {
  width: 70px;
  height: 25px;
  padding: 0;
  font-size: 6px;
  border-radius: 0;
}
.output {
  width: 100px;
  height: 25px;
  padding: 0;
  font-size: 6px;
  border-radius: 0;
  background-color: cornflowerblue;
  color: #fff;
  border: 0;
}
.table {
  margin-left: 20px;
  margin-right: 20px;
}
.table >>> .el-table {
  background-color: #051630;
  color: #238cd6;
  font-size: 6px;
}
.table >>> .el-table__row {
  background-color: #051630;
}
.table >>> .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: transparent !important;
}
.table >>> .el-table th, .el-table tr {
  background-color: #051630;
  color: #fff;
  text-align: center;
}
.table >>> .el-table--border {
  border: 1px solid #238cd6;
}
.table >>> .el-table--border td {
  border: 1px solid #238cd6;
}
.table >>> .el-table th.is-leaf {
  border-bottom: 1px solid #238cd6;
}
.table >>> .el-table--border th {
  border-right: 1px solid #238cd6;
}
.table >>> .el-table--border::after, .el-table--group::after, .el-table::before {
  background-color: #238cd6;
}
.table >>> .el-table td {
  padding: 8px 0;
  text-align: center;
}
.edit-button.el-button {
  width: 18px;
}
.delete-button.el-button {
  width: 18px;
}
.edit {
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}
.table >>> .el-dialog__header {
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.delete {
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}
.lock {
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}
.header-button {
  float: left;
}
.table >>> .el-table .cell {
  line-height: 12px;
}
.block >>> .el-pagination span:not([class*=suffix]) {
  margin-left: 15px;
  color: white;
}
.block {
  margin-top: 10px;
}
.block >>> .el-pagination .btn-prev {
  background-color: #051630;
  color: #fff;
}
.block >>> .el-pagination button:disabled {
  background-color: #051630;
}
.block >>> .el-pager li{
  background-color: #051630;
  color: white;
}
.block >>> .el-pager li.active {
  color: #238cd6;
}
.block >>> .el-pagination .btn-next {
  background-color: #051630;
  color: #fff;
}
.block >>> .el-input__inner {
  border: 1px solid #238cd6;
  background-color: #051630;
  color: #fff;
}
.el-main {
  padding: 0;
}
.edit-dialog >>> .el-input__inner {
  height: 30px;
  background-color: #061d3c;
  border: 1px solid #238cd6;
  width: 440px;
  color: #fff;
}
.bottom {
  clear: both;
  text-align: center;
}
.edit-dialog >>> .el-dialog__body {
  padding-bottom: 10px;
  background-size: 100% 100%!important;
  background-image: url(../assets/img/整体效果.png);
}
.edit-dialog >>> .el-dialog {
  background: transparent;
}
</style>
